/*
 * @Author: Eli.Chen
 * @Date: 2025-04-27 14:32:56
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-04-29 18:11:34
 * @Description:
 */

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { List, Image, Button, Popconfirm, message } from 'antd';
import { DeleteOutlined, PlayCircleFilled } from '@ant-design/icons';
import moment from 'moment';

import { getUserTPostsList, deleteTPost } from '@/api/user';
import { urlMap, imagesMap } from '@/utils';

export default function WorkCenter() {
    const [works, setWorks] = useState([]);
    const { userInfo } = useSelector((state) => state.auth);

    const getTPosts = async () => {
        try {
            const res = await getUserTPostsList(userInfo?.userId);
            if (res.code === 200) {
                setWorks(res.data);
            }
        } catch (error) {
            console.error('Error fetching posts:', error);
        }
    };

    const handleDelete = async (id) => {
        try {
            if (!id) return;
            const res = await deleteTPost(id);
            if (res.code === 200) {
                message.success('删除成功');
                getTPosts();
            }
        } catch (error) {
            message.error('删除失败');
            console.error('Error fetching posts:', error);
        }
    };
    useEffect(() => {
        getTPosts();
    }, []);

    return (
        <List
            itemLayout="vertical"
            dataSource={works}
            renderItem={(item, index) => (
                <List.Item
                    style={{
                        padding: '16px 0',
                        borderBottom: index !== works.length - 1 ? '1px solid #f0f0f0' : 'none',
                    }}
                    actions={[
                        <span style={{ color: '#666' }}>{moment(item.createdAt).format('YYYY-MM-DD HH:mm')}</span>,
                        <Popconfirm
                            title="确认删除该帖子？"
                            onConfirm={() => handleDelete(item.tpostId)}
                            okText="确认"
                            cancelText="取消"
                        >
                            <Button danger type="link" icon={<DeleteOutlined />} style={{ padding: 0 }}>
                                删除
                            </Button>
                        </Popconfirm>,
                    ]}
                >
                    <List.Item.Meta
                        avatar={
                            item?.imagePath ? (
                                /\.(mp4|mov|avi|webm)$/i.test(item.imagePath) ? (
                                    <div style={{ position: 'relative' }}>
                                        <video
                                            controls
                                            width={120}
                                            height={80}
                                            style={{
                                                borderRadius: 4,
                                                objectFit: 'cover',
                                                cursor: 'pointer',
                                            }}
                                            onClick={(e) => {
                                                const video = e.target;
                                                video.play();
                                                if (video.requestFullscreen) {
                                                    video.requestFullscreen();
                                                } else if (video.webkitRequestFullscreen) {
                                                    video.webkitRequestFullscreen();
                                                } else if (video.msRequestFullscreen) {
                                                    video.msRequestFullscreen();
                                                }
                                            }}
                                        >
                                            <source
                                                src={urlMap.defaultUrl + imagesMap.defaultPicturePath + item.imagePath}
                                            />
                                        </video>
                                        <PlayCircleFilled
                                            style={{
                                                position: 'absolute',
                                                top: '50%',
                                                left: '50%',
                                                transform: 'translate(-50%, -50%)',
                                                fontSize: 32,
                                                color: 'rgba(255,255,255,0.9)',
                                                backgroundColor: 'rgba(0,0,0,0.2)',
                                                borderRadius: '50%',
                                                padding: 4,
                                                cursor: 'pointer',
                                                transition: 'all 0.3s',
                                                transformOrigin: 'center',
                                            }}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                const video = e.currentTarget.closest('div').querySelector('video');
                                                video.play();
                                                if (video.requestFullscreen) {
                                                    video.requestFullscreen();
                                                } else if (video.webkitRequestFullscreen) {
                                                    video.webkitRequestFullscreen();
                                                } else if (video.msRequestFullscreen) {
                                                    video.msRequestFullscreen();
                                                }
                                            }}
                                            onMouseEnter={(e) =>
                                                (e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.2)')
                                            }
                                            onMouseLeave={(e) =>
                                                (e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1)')
                                            }
                                        />
                                    </div>
                                ) : (
                                    <Image
                                        src={urlMap.defaultUrl + imagesMap.defaultPicturePath + item.imagePath}
                                        width={120}
                                        height={80}
                                        style={{ borderRadius: 4 }}
                                        preview={false}
                                    />
                                )
                            ) : null
                        }
                        title={<span style={{ fontSize: 16 }}>{item.title}</span>}
                        description={item?.content}
                    />
                </List.Item>
            )}
        />
    );
}
